﻿@using System.Diagnostics;
@using Project_CPU.Controllers;
@using Project_CPU.GenerateData;

@{
    ViewBag.Title = "Dynamic";
}
@{
    var oSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    string sJSON = oSerializer.Serialize(Model);
}
@sJSON

@*{
        PerformanceCounter theCPUCounter = new PerformanceCounter("Processor", "% Processor Time", "_Total");
        var oSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        string sJSON = oSerializer.Serialize(Model);
        ViewBag.Entries.Add((int)theCPUCounter.NextValue());
    }*@


<script type="text/javascript" src="/Scripts/exporting.js"></script>
<script type="text/javascript">


        $(function () {


            var chart;
            $(document).ready(function () {
                Highcharts.setOptions({
                    global: {
                        useUTC: false
                    }
                });
              //  url: '@Url.Action("Dynamic", "Index")',
                chart = new Highcharts.Chart({
                    chart: {
                        type: 'spline',
                        renderTo: 'graph',
                        animation: Highcharts.svg, // don't animate in old IE
                        marginRight: 10,//speed line drawing
                        events: {
                            load: function () {

                                    // set up the updating of the chart each second
                                    var series = this.series[0];
                                setInterval(function () {


                                    var x = (new Date()).getTime(); // current time

                                   // y = @ViewBag.Entries[10]
                                    y= Math.random() * 100
                            series.addPoint([x, y], true, true);
                                }, 1000);

                                }

                            }
                        },
                        title: {
                            text: 'Загрузка ЦП'
                        },
                        xAxis: {
                            type: 'datetime',
                            tickPixelInterval: 150
                        },
                        yAxis: {
                            title: {
                                text: 'Value'
                            },
                            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                        },
                        tooltip: {//point name
                            formatter: function () {
                                return '<b>' + this.series.name + '</b><br/>' +
                                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                                Highcharts.numberFormat(this.y, 2);
                            }
                        },
                        rangeSelector: {
                            buttons: [
                                { type: 'minute', count: 1, text: '1m' },
                                { type: 'minute', count: 5, text: '5m' },
                                { type: 'minute', count: 15, text: '15m' },
                                { type: 'all', text: 'All' }
                            ],
                            selected: 0
                        },
                        legend: {
                            enabled: false
                        },
                        exporting: {
                            enabled: false
                        },
                        series: [{
                            name: 'Data , %',

                            data: (function () {
                                // generate an array of random data
                                var data = [],
                                    time = (new Date()).getTime(),
                                    i;



                                for (var i = -19; i <= 0; i++) {
                                    data.push({
                                        x: time + i * 1000,//для более рандомного значения x
                                        y: Math.random() * 100,





                                    });
                                }
                                return data;
                            })()
                        }]
                    });
            });

        });

    $.ajax({
        url: '@Url.Action("Dynamic", "CPU")',
        dataType: 'json',
        // data:@ViewBag.Entries[ViewBag.AllElem-1],
        data:5,
        success: callback
    });

</script>
<blockquote><center><big><i><p style="padding:25px;border:2px solid black;bottom:50px;right:10px;" ">Это текст на странице с динамическим графиком загрузки CPU.</i></p></big></center></blockquote>
<form>
    <button><mark>Нажмите,чтобы обновить страницу</mark></button>
    <style>
        mark {
            background: #ffec82;
            padding: 0 3px;
            border: 1px dashed #333;
        }
    </style>
</form>


<div id="graph" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
